/**
 * 登录页面组件
 * 
 * 功能说明：
 * - 用户登录表单
 * - 表单验证
 * - 记住我功能
 * - 忘记密码链接
 * - 注册引导
 */

// 导入 React 库和 useState 钩子
import React, { useState } from 'react'
// 导入 Ant Design 组件库中的表单、输入框、按钮等组件
import { 
  Form, 
  Input, 
  Button, 
  Card, 
  Typography, 
  Checkbox, 
  Divider,
  Space,
  message
} from 'antd'
// 导入 Ant Design 图标库中的用户、锁、邮件图标
import { 
  UserOutlined, 
  LockOutlined, 
  MailOutlined, 
  ArrowRightOutlined 
} from '@ant-design/icons'
// 导入 React Router DOM 中的 Link 组件和 useNavigate 钩子
import { Link, useNavigate } from 'react-router-dom'
// 导入自定义的认证状态管理钩子
import { useAuthStore } from '@stores/auth'

// 从 Typography 组件中解构出 Title 和 Text 组件
const { Title, Text } = Typography

/**
 * 登录页面组件
 */
function LoginPage() {
  // 使用 useNavigate 钩子获取导航函数，用于页面跳转
  const navigate = useNavigate()
  // 使用自定义的 useAuthStore 钩子获取登录函数和加载状态
  const { login, isLoading } = useAuthStore()
  // 使用 Form.useForm() 创建表单实例
  const [form] = Form.useForm()
  // 使用 useState 钩子创建一个状态变量 rememberMe，用于存储是否记住登录状态
  const [rememberMe, setRememberMe] = useState(false)

  /**
   * 处理登录提交
   * 
   * @param {Object} values - 表单数据
   */
  const handleSubmit = async (values) => {
    try {
      console.log('登录表单数据:', values);
      // 调用登录函数，传入邮箱和密码
      const success = await login({
        email: values.email,
        password: values.password
      })
      console.log('登录结果:', success);

      // 如果登录成功，跳转到主页
      if (success) {
        navigate('/')
      } else {
        message.error('登录失败，请检查用户名和密码')
      }
    } catch (error) {
      // 捕获登录过程中发生的错误，并在控制台打印详细错误信息
      console.error('登录错误详情:', error);
      console.error('错误响应:', error.response);
      message.error('登录过程中发生错误，请稍后重试')
    }
  }

  /**
   * 处理登录失败
   * 
   * @param {Object} errorInfo - 错误信息
   */
  const handleSubmitFailed = (errorInfo) => {
    // 打印表单验证失败的错误信息
    console.log('表单验证失败:', errorInfo)
    // 使用 Ant Design 的 message 组件显示错误提示信息
    message.error('请检查输入信息')
  }

  return (
    <div 
      style={{
        // 设置最小高度为 100vh，使容器至少占满整个视口高度
        minHeight: '100vh',
        // 使用 Flexbox 布局，使子元素垂直居中
        display: 'flex',
        alignItems: 'center',
        // 使用 Flexbox 布局，使子元素水平居中
        justifyContent: 'center',
        // 设置背景为渐变颜色
        background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
        // 设置内边距为 20px
        padding: '20px',
        // 添加背景装饰
        position: 'relative',
        overflow: 'hidden'
      }}
    >
      {/* 背景装饰 */}
      <div style={{
        position: 'absolute',
        width: '400px',
        height: '400px',
        background: 'rgba(24, 144, 255, 0.05)',
        borderRadius: '50%',
        top: '-100px',
        right: '-100px',
        zIndex: 0
      }} />
      <div style={{
        position: 'absolute',
        width: '300px',
        height: '300px',
        background: 'rgba(24, 144, 255, 0.03)',
        borderRadius: '50%',
        bottom: '-150px',
        left: '-150px',
        zIndex: 0
      }} />
      
      <Card
        style={{
          // 设置卡片宽度为 100%，最大宽度为 400px
          width: '100%',
          maxWidth: 420,
          // 设置卡片圆角为 16px
          borderRadius: 16,
          // 设置卡片阴影效果
          boxShadow: '0 10px 40px rgba(0, 0, 0, 0.08)',
          // 移除卡片边框
          border: 'none',
          // 添加背景色
          background: 'white',
          // 添加相对定位以覆盖背景装饰
          position: 'relative',
          zIndex: 1,
          // 添加过渡动画
          transition: 'transform 0.3s ease, box-shadow 0.3s ease'
        }}
        hoverable
      >
        {/* 头部标题 */}
        <div style={{ textAlign: 'center', marginBottom: 32, paddingTop: 16 }}>
          <div 
            style={{
              // 设置容器宽度和高度为 80px
              width: 80,
              height: 80,
              // 设置容器为圆形
              borderRadius: '50%',
              // 设置容器背景为渐变颜色
              background: 'linear-gradient(135deg, #1890ff, #13c2c2)',
              // 使用 Flexbox 布局，使子元素垂直居中
              display: 'flex',
              alignItems: 'center',
              // 使用 Flexbox 布局，使子元素水平居中
              justifyContent: 'center',
              // 设置容器上下外边距为 0，左右外边距为自动，底部外边距为 20px
              margin: '0 auto 20px',
              // 设置文字颜色为白色
              color: 'white',
              // 设置文字加粗
              fontWeight: 'bold',
              // 设置文字大小为 32px
              fontSize: 32,
              // 添加阴影
              boxShadow: '0 4px 20px rgba(24, 144, 255, 0.2)',
              // 添加过渡动画
              transition: 'transform 0.3s ease'
            }}
            className="logo-container"
            onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.05)'}
            onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
          >
            二
          </div>
          <Title level={3} style={{ marginBottom: 8, fontSize: '24px', fontWeight: 600, color: '#333' }}>
            欢迎回来
          </Title>
          <Text type="secondary" style={{ fontSize: '16px', color: '#666' }}>
            登录二手交易平台
          </Text>
        </div>

        {/* 登录表单 */}
        <Form
          form={form}
          name="login"
          // 设置表单布局为垂直布局
          layout="vertical"
          // 绑定表单提交成功的处理函数
          onFinish={handleSubmit}
          // 绑定表单提交失败的处理函数
          onFinishFailed={handleSubmitFailed}
          // 关闭表单自动完成功能
          autoComplete="off"
        >
          {/* 邮箱/用户名 */}
          <Form.Item
            name="email"
            rules={[
              {
                // 设置邮箱/用户名输入框为必填项
                required: true,
                // 设置验证失败时的提示信息
                message: '请输入邮箱或用户名'
              }
            ]}
            style={{ marginBottom: 20 }}
          >
            <Input
              // 设置输入框前缀图标为用户图标
              prefix={<UserOutlined style={{ color: '#1890ff' }} />}
              // 设置输入框占位符
              placeholder="邮箱或用户名"
              // 设置输入框大小为大尺寸
              size="large"
              // 设置输入框圆角为 10px
              style={{ 
                borderRadius: 10,
                borderColor: '#e8e8e8',
                height: 48,
                fontSize: 16,
                transition: 'all 0.3s ease'
              }}
              // 添加焦点样式
              className="custom-input"
            />
          </Form.Item>

          {/* 密码 */}
          <Form.Item
            name="password"
            rules={[
              {
                // 设置密码输入框为必填项
                required: true,
                // 设置验证失败时的提示信息
                message: '请输入密码'
              },
              {
                // 设置密码最小长度为 6 位
                min: 6,
                // 设置验证失败时的提示信息
                message: '密码长度至少6位'
              }
            ]}
            style={{ marginBottom: 20 }}
          >
            <Input.Password
              // 设置输入框前缀图标为锁图标
              prefix={<LockOutlined style={{ color: '#1890ff' }} />}
              // 设置输入框占位符
              placeholder="密码"
              // 设置输入框大小为大尺寸
              size="large"
              // 设置输入框圆角为 10px
              style={{ 
                borderRadius: 10,
                borderColor: '#e8e8e8',
                height: 48,
                fontSize: 16,
                transition: 'all 0.3s ease'
              }}
              className="custom-input"
            />
          </Form.Item>

          {/* 记住我和忘记密码 */}
          <Form.Item style={{ marginBottom: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Checkbox 
                // 设置复选框选中状态
                checked={rememberMe}
                // 绑定复选框状态改变的处理函数
                onChange={(e) => setRememberMe(e.target.checked)}
              >
                <span style={{ color: '#666', fontSize: 14 }}>记住我</span>
              </Checkbox>
              {/* 忘记密码链接 - 保持在视觉上存在但不可点击 */}
              <Link to="/forgot-password" style={{ color: '#1890ff', fontSize: 14, cursor: 'pointer', opacity: 0.7 }}>
                忘记密码？
              </Link>
            </div>
          </Form.Item>

          {/* 登录按钮 */}
          <Form.Item style={{ marginBottom: 24 }}>
            <Button
              // 设置按钮类型为主要按钮
              type="primary"
              // 设置按钮的 HTML 类型为提交按钮
              htmlType="submit"
              // 设置按钮大小为大尺寸
              size="large"
              // 设置按钮加载状态
              loading={isLoading}
              icon={!isLoading && <ArrowRightOutlined />}
              style={{
                // 设置按钮宽度为 100%
                width: '100%',
                // 设置按钮圆角为 10px
                borderRadius: 10,
                // 设置按钮高度为 48px
                height: 48,
                // 设置按钮文字大小为 16px
                fontSize: 16,
                // 设置按钮背景色
                backgroundColor: '#1890ff',
                // 设置按钮文字粗细
                fontWeight: 500,
                // 添加过渡动画
                transition: 'all 0.3s ease',
                // 添加按钮阴影
                boxShadow: '0 4px 12px rgba(24, 144, 255, 0.2)'
              }}
              // 添加悬停效果
              className="login-button"
              onMouseEnter={(e) => {
                if (!isLoading) {
                  e.currentTarget.style.backgroundColor = '#40a9ff';
                  e.currentTarget.style.transform = 'translateY(-1px)';
                  e.currentTarget.style.boxShadow = '0 6px 16px rgba(24, 144, 255, 0.3)';
                }
              }}
              onMouseLeave={(e) => {
                if (!isLoading) {
                  e.currentTarget.style.backgroundColor = '#1890ff';
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = '0 4px 12px rgba(24, 144, 255, 0.2)';
                }
              }}
            >
              {isLoading ? '登录中...' : '登录'}
            </Button>
          </Form.Item>

          {/* 分隔线 */}
          <Divider style={{ marginBottom: 20 }}>
            <Text type="secondary" style={{ fontSize: 14, color: '#999' }}>
              还没有账号？
            </Text>
          </Divider>

          {/* 注册链接 */}
          <div style={{ textAlign: 'center' }}>
            <Link 
              to="/register" 
              style={{ 
                // 设置链接文字颜色为蓝色
                color: '#1890ff', 
                // 设置链接文字加粗
                fontWeight: 500,
                // 设置字体大小
                fontSize: 16,
                // 添加过渡动画
                transition: 'color 0.3s ease',
                // 设置显示为行内块，以便添加悬停效果
                display: 'inline-block'
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = '#40a9ff'}
              onMouseLeave={(e) => e.currentTarget.style.color = '#1890ff'}
            >
              立即注册
            </Link>
          </div>
        </Form>

        {/* 温馨提示 */}
        
      </Card>
      
      {/* 添加全局样式 */}
      <style>{`
        /* 自定义输入框焦点样式 */
        .custom-input:focus {
          border-color: #1890ff !important;
          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
        }
        
        /* 自定义输入框过渡效果 */
        .custom-input:hover {
          border-color: #1890ff !important;
        }
        
        /* 自定义复选框样式 */
        .ant-checkbox-checked .ant-checkbox-inner {
          background-color: #1890ff !important;
          border-color: #1890ff !important;
        }
        
        /* Ant Design v5 样式 */
        .antCheckboxChecked .antCheckboxInner {
          background-color: #1890ff !important;
          border-color: #1890ff !important;
        }
        /* 确保页面加载时没有过渡闪烁 */
        * {
          transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
        }
      `}</style>
    </div>
  )
}

// 导出登录页面组件
export default LoginPage 